$(function () {
  /* 实现需求:分享栏目右边导航栏的制作,鼠标经过左边的li,右边相对应的目录显示0 */
  $(".first")
    .css("opacity", "1")
    .children("h3")
    .css("margin-left", "-28%")
    .siblings("p")
    .css("margin-left", "-28%")
    .siblings("b")
    .css({ "margin-left": "-27.15%", opacity: "1" })
    .siblings("i")
    .css({ "margin-left": "-31%", opacity: "1" });
  $(".tab-list li").mouseenter(function () {
    /* 控制右边目录 */
    $(this)
      .parents(".link-tab")
      .siblings(".link-content")
      .children()
      .eq($(this).index())
      .stop()
      .fadeIn();
    $(this)
      .parents(".link-tab")
      .siblings(".link-content")
      .children()
      .eq($(this).index())
      .siblings()
      .stop()
      .hide();
    /* 控制左边的导航栏 */
    $(this)
      .children("a")
      .fadeTo("normal", 1)
      .children("h3")
      .css("margin-left", "-28%")
      .siblings("p")
      .css("margin-left", "-28%")
      .siblings("b")
      .css({ "margin-left": "-27.15%", opacity: "1" })
      .siblings("i")
      .css({ "margin-left": "-31%", opacity: "1" });
    $(this)
      .siblings("li")
      .children("a")
      .fadeTo("normal", 0.5)
      .children("h3")
      .css("margin-left", "-32%")
      .siblings("p")
      .css("margin-left", "-32%")
      .siblings("b")
      .css({ "margin-left": "-32%", opacity: "0" })
      .siblings("i")
      .css({ "margin-left": "-40%", opacity: "0" });
  });
  $(".link-content .link-content-items li").mouseenter(function () {
    $(this)
      .children(".slideup")
      .children(".title")
      .css({ "margin-top": "59px" })
      .siblings("p")
      .css("opacity", "1")
      .siblings("b")
      .animate({ opacity: 1, right: 71 }, "fast");
    $(this)
      .siblings("li")
      .children(".slideup")
      .children(".title")
      .css({ "margin-top": "119px" })
      .siblings("p")
      .css("opacity", "0")
      .siblings("b")
      .animate({ opacity: 0, right: 76 }, "fast");
  });
  $(".link-content .link-content-items li").mouseleave(function () {
    $(this)
      .children(".slideup")
      .children(".title")
      .css({ "margin-top": "119px" })
      .siblings("p")
      .css("opacity", "0")
      .siblings("b")
      .animate({ opacity: 0, right: 76 }, "fast");
  });
  var achievImg = document.querySelector(".achiev-img");
  var developImg = document.querySelector(".develop-img");
  var developBtn = document.querySelector('.develop-btn')
  // console.log(achievImg);
  var lis1 = achievImg.querySelectorAll("li");
  var lis2 =developImg.querySelectorAll("li");
  var lis3 =developBtn.querySelectorAll('li');
  console.log(lis3);
  // console.log(lis2[0]);
  // console.log($(lis2[0]));
  var num = 0;
  var index = 0;
  var timerone = setInterval(function () {
    achievImg.querySelector(".open").className = "meil";
    num++;
    if (num === 4) {
      num = 0;
    }
    lis1[num].className = "open";
    // console.log($(lis2[index]));
    // console.log($("lis2[0]"));
  }, 2000);
  var timertwo = setInterval(function () {
    index++
    if (index === 3) {
     index = 0;
    }
    $(lis2[index]).css("opacity","1");
    $(lis3[index]).css({width:"24",backgroundColor:"#0052d9"});
    $(lis2[index]).siblings("li").css("opacity","0");
    $(lis3[index]).siblings("li").css({width:"8",backgroundColor:"#fff"});
  }, 2000);
  var item = 0;
  $(".develop-btn").on("click",".items",function(){
    // clearInterval(timertwo);
    console.log($(this).index());
    $(this).css({width:"24",backgroundColor:"#0052d9"});
    $(this).siblings("li").css({width:"8",backgroundColor:"#fff"});
    $(lis2[$(this).index()]).css("opacity","1");
    $(lis2[$(this).index()]).siblings("li").css("opacity","0");
    item = $(this).index();
    index = item;
  })
/*   timertwo = setInterval(function () {
    index = item;
    if (index === 3) {
     index = 0;
    }
    $(lis2[index]).css("opacity","1");
    $(lis3[index]).css({width:"24",backgroundColor:"#0052d9"});
    $(lis2[index]).siblings("li").css("opacity","0");
    $(lis3[index]).siblings("li").css({width:"8",backgroundColor:"#fff"});
  }, 2000); */
  /* 视频部分上下轮播图制作 */
    var i = 0;
    var ul = document.querySelector(".move-ul");
    var pp = ul.children[0].cloneNode(true);
    ul.appendChild(pp);
    var timer = setInterval(function() {
    if (i === ul.children.length-1) {
      ul.style.top = 0;
      i = 0;
    }
    i++
    cartoon(ul,-(i * ul.children[0].offsetHeight))
      }, 2225);
}); 
